<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: cwh
 * @LastEditTime: 2022-01-07 18:48:43
-->
<template>
  <!--1. 容器 -->
  <div ref="left2_container" style="height: 95%"></div>
</template>
<script>
import { Column } from '@antv/g2plot'

export default {
  data(){
    return{
      dataArr: [{
    "year": "1991",
    "type": "5"
  },
  {
    "year": "1992",
    "type": "6"
  },
  {
    "year": "1993",
    "type": "6"
  },
  {
    "year": "1994",
    "type": "7"
  },
  {
    "year": "1995",
    "type": "7"
  },]
    }
  },
  mounted(){
    this.initChart()
  },
  methods:{
    initChart(){
    const column = new Column(this.$refs.left2_container,{
      data:this.dataArr,
      xField: 'year',
      yField: 'type',
      // 悬浮框提示
      tooltip:{
        fields:['year','type'],
        domStyles:{
          'g2-tooltip':{
            padding:'5px',
            background:'rgba(47,6,170,0.8)',
            color:'#fff',
            fontsize:'16px',
          }
        }
      },
      xAxis:{
        label:{
          rotate:-45,
          offset:20,
        }
      }
    })
    column.render()
  }}
}
</script>
